<template>
    <div>
        <div class="container">
            <div class="textBox">
                <div class="le">欢迎语</div>
                <el-input v-model="autoReply.welcome" :rows="6" type="textarea" placeholder="请输入机器人欢迎语" />
            </div>
            <div class="textBox">
                <div class="le">欢迎语(英文)</div>
                <el-input v-model="autoReply.welcome_en" :rows="6" type="textarea" placeholder="请输入机器人欢迎语" />
            </div>
            <div class="textBox">
                <div class="le">联系客服</div>
                <el-input v-model="autoReply.customer" :rows="6" type="textarea" placeholder="请输入联系客服自动回复" />
            </div>
            <div class="textBox">
                <div class="le">联系客服(英文)</div>
                <el-input v-model="autoReply.customer_en" :rows="6" type="textarea" placeholder="请输入联系客服自动回复" />
            </div>
            <div class="textBox">
                <div class="le">使用说明</div>
                <el-input v-model="autoReply.instructions" :rows="6" type="textarea" placeholder="请输入使用说明自动回复" />
            </div>
            <div class="textBox">
                <div class="le">使用说明(英文)</div>
                <el-input v-model="autoReply.instructions_en" :rows="6" type="textarea" placeholder="请输入使用说明自动回复" />
            </div>
            <div style="text-align: center;">
                <el-button type="primary" @click="submit">确认</el-button>
                <el-button @click="getData">重置</el-button>
            </div>
        </div>
    </div>

</template>
<script setup lang="ts">
    import { ref, reactive } from 'vue';
    import { ElMessage } from 'element-plus';
    import { CirclePlusFilled } from '@element-plus/icons-vue';
    import { User } from '@/types/user';
    import { agentAutoReply, agentUpdateAutoReply } from '@/api';
    import TableCustom from '@/components/table-custom.vue';
    import { FormOption, FormOptionList } from '@/types/form-option';

    let textarea = ref('');

    // 查询相关
    const query = reactive({
        name: '',
    });
    let autoReply = ref({
        welcome: '',
        welcome_en: '',
        customer: '',
        customer_en: '',
        instructions: '',
        instructions_en: '',

    })


    const getData = async () => {
        const res = await agentAutoReply()
        if (res.data) {
            autoReply.value = { ...autoReply.value, ...res.data };
        }

    };
    getData();

    const submit = async () => {
        let res = await agentUpdateAutoReply(autoReply.value)
        if (res.code == 1) {
            ElMessage.success(res.msg)
        }
    }
</script>

<style scoped>
    .textBox {
        display: flex;
        margin: 9px 0;

        .le {
            width: 120px;
            font-size: 14px;
            margin: 6px 0;
        }
    }

    @media (max-width: 768px) {
        .textBox {
            flex-direction: column;
            align-items: flex-start;
        }

    }
</style>